<template>
  <div id="datayear" style="height: 100%"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'shdrrwlEcharts',
  props:{
    lineData:{
       type:Array,
       default:[]
    }
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
    this.$nextTick(()=>{
      this.drawLine(this.lineData)
    })
  },
  methods: {
    drawLine(data) {

      var chartDom = document.getElementById('datayear')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        legend: {
          top: 10,
          width: '100%',
          textStyle: {
            fontSize: 11,
          },
          itemHeight: 12,
          itemWidth: 20,
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29,
            30,
          ],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#cdcdcd',
              width: 1,
              type: 'solid',
            },
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            color: 'gray',
            interval: function (val, key) {
              if (val % 2 == 1) {
                return val
              }
            },
          },
          boundaryGap: false,
          name: '数量/天',
          nameLocation: "start",
          nameTextStyle: {
            fontWeight: 'normal',
            align: 'center',
            verticalAlign: 'top',
            lineHeight: 35,
             color:'gray' ,
             fontSize: 11
          },
        },
        grid: {
          top: 45,
          bottom: 25,
          left: 40,
          right: 10,
        },
        yAxis: {
          type: 'value',
          gridIndex: 0,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#cdcdcd9e',
              width: 1,
              type: 'solid',
            },
          },
          
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: 'gray',
            },
            margin: 15,
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
            length: 10,
          },
        },
        series: data
      }
      myChart.setOption(option)
      option && myChart.setOption(option)
    },
  },
}
</script>

<style scoped>
</style>